<template>
  <div id="visualData6">
    <div class="gradient-divider">
      土壤样品磷含量理化分析数据
    </div>
    <div id="echartSoilP"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "visualData6",
  data() {
    return {
      categories: Array.from({ length: 16 }, (_, i) => i + 1), // 样区 1-16
      dataP: {
        '6.11': [0.443,0.325,0.285,0.413,0.343,0.341,0.328,0.392,0.277,0.351,0.252,0.330,0.370,0.342,0.293,0.250],
        '5.21': [0.260,0.266,0.284,0.227,0.246,0.287,0.253,0.237,0.198,0.258,0.269,0.258,0.210,0.246,0.252,0.217],
        '5.5':  [0.211,0.234,0.210,0.245,0.144,0.252,0.203,0.274,0.174,0.218,0.271,0.269,0.262,0.296,0.186,0.269]
      }
    }
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      const chart = echarts.init(document.getElementById('echartSoilP'));
      chart.setOption({
        grid: { top: '20%', bottom: '10%', left: '10%', right: '5%' },
        legend: {
          data: Object.keys(this.dataP),
          textStyle: { color: "#fff", fontSize: '12' },
          top: 25
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: this.categories,
          name: '样区',
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: { textStyle: { color: "#fff", fontSize: '13' } }
        },
        yAxis: {
          type: 'value',
          name: '磷 (%)',
          axisLine: { lineStyle: { color: "#fff" } },
          axisLabel: { textStyle: { color: "#fff", fontSize: '13' } },
          splitLine: { show: false }
        },
        series: Object.keys(this.dataP).map(date => ({
          name: date,
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          data: this.dataP[date]
        }))
      });
    }
  }
}
</script>

<style scoped lang="scss">
#visualData6 {
  padding: 0 .2em;
}

#echartSoilP {
  height: 220px;
  width: 100%;
}

.gradient-divider {
  display: flex;
  align-items: center;
  height: 28px;
  font-size: 17px;
  font-weight: bold;
  border-radius: 3px;
  color: #f3f1f1;
  background: linear-gradient(to right, rgb(24, 115, 164) 0%, transparent);
  padding: 0 10px;
}
</style>
